import React from 'react';
import {Form, Row, Col, Button, Divider} from 'antd';
import Grid from '../../components/table/grid';
import {withRouter} from 'react-router-dom';
import {injectIntl} from 'react-intl';
import StubPicker from '../../components/pickCity/StubPicker';
import {interStatus} from '../../utils/tranStartType';
import {Link} from 'react-router-dom';
import ModifyGroup from './modifyGroup';

const FormItem = Form.Item;
const createForm = Form.create;

@withRouter
class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentRowInfo: {},
            visible: false,
            options: [],
            params: {},
            refresh: 0,
        };
        const common = this.props.intl.messages.common;
        this.columns = [{
            title: common.stationId,
            dataIndex: 'stationId',
            key: 'stationId',
        }, {
            title: common.powerStationName,
            dataIndex: 'stationName',
            key: 'stationName',
        },
            {
                title: common.status,
                dataIndex: 'stationStatus',
                key: 'stationStatus',
            }, {
                title: common.operation,
                key: 'operation',
                render: (text, record) => {
                    return (
                        <span>
                            <a onClick={() => this.openGroup(text, record)}>{common.modifyStub}</a>
                            <Divider type="vertical"/>
                            <Link to={{pathname: "/interconnection/stub", state: text}}>
                                {common.equipmentList}
                            </Link>
                        </span>
                    )
                },
            }];
    }

    openGroup = (t, r) => {
        this.setState({
            visible: true,
            currentRowInfo: t
        })
    }

    //清空
    handleReset = () => {
        this.props.form.resetFields();
    }
    //表单验证
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((errors, values) => {
            if (!!errors) {
                console.log('Errors in form!!!');
                return;
            }
            console.log(values);
            values.stationId = values.stationId.currency;
            this.setState({
                visible: false,
                params: {...values},
                refresh: this.state.refresh + 1
            });
        });
    };

    transformData = (data) => {
        data.forEach((k, v) => {
            for (let key of Object.keys(k)) {
                if (key === 'stationStatus') {
                    k[key] = interStatus(k[key])
                }
                k.id = v;
            }
        });
        return data
    };

    freshGrid = () => {
        this.setState({
            refresh: this.state.refresh + 1
        });
    };

    handleCancel = () => {
        this.setState({
            visible: false,
        });
    };


    render() {
        const {getFieldDecorator} = this.props.form;
        const common = this.props.intl.messages.common;
        return (
            <div>
                <form form={this.props.form} onSubmit={this.handleSubmit}>
                    <Row gutter={16}>
                        <Col xl={5} xxl={3}>
                            <FormItem
                            >
                                {getFieldDecorator(`stationId`, {initialValue: {currency: undefined}})(
                                    <StubPicker url="/api/evcs/stubGroup/qry"/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={18}>
                            <FormItem>
                                <Button className="ant-btn-84" onClick={this.handleReset}>{common.clear}</Button>
                                <Button type="primary" className="ant-btn-84" htmlType="submit">{common.search}</Button>
                            </FormItem>
                        </Col>
                    </Row>
                </form>
                <Grid transformData={this.transformData} refresh={this.state.refresh} params={this.state.params}
                      columns={this.columns} url="/api/evcs/stubGroup/qry"/>
                <ModifyGroup visible={this.state.visible} title={common.modifyStub} onCancel={this.handleCancel}
                             freshGrid={this.freshGrid} currentRowInfo={this.state.currentRowInfo}/>
            </div>
        )
    }
}

//ant 表格验证需要创建表格-createForm
Test = createForm()(Test);
export default injectIntl(Test)

